﻿@{
    Layout = null;
}
<div class="layui-card-header">本地便签</div>
<div class="note-wrapper"></div>
<div class="note-empty">
    <i class="layui-icon layui-icon-face-surprised"></i>
    <p>没有便签</p>
</div>
<div class="btn-circle" id="noteAddBtn" title="添加便签" style="position: absolute;">
    <i class="layui-icon layui-icon-add-1"></i>
</div>

<script>layui.use(['layer', 'form', 'util', 'admin', 'notice'], function () {
        var $ = layui.jquery;
    var layer = layui.layer;
    var notice = layui.notice;
        var util = layui.util;
        var admin = layui.admin;
        var dataList = [];  // 便签列表
        var $noteWrapper = $('.note-wrapper');

        /* 渲染列表 */
        function renderList() {
            $noteWrapper.empty();
            //dataList = layui.data(admin.setter.tableName).notes;
            $.post("/api/admin/GetNoteList", {}, function (res) {
                res = JSON.parse(res)
                dataList = res;
                for (var i = 0; i < res.length; i++) {
                    var item = dataList[i];
                    $noteWrapper.prepend([
                        '<div class="note-item" data-index="', i, '" data-id="', item.id, '">',
                        '   <div class="note-item-content">', util.escape(item.content), '</div>',
                        '   <div class="note-item-time">', item.time, '</div>',
                        '   <i class="layui-icon layui-icon-close-fill note-item-del"></i>',
                        '</div>'
                    ].join(''));
                }
                layui.data(admin.setter.tableName, { key: 'notes', value: dataList });

                $('.note-empty').css('display', dataList.length === 0 ? 'block' : 'none');
                // 点击修改
                $('.note-item').click(function () {
                    var index = parseInt($(this).attr('data-index'));
                    showNote(dataList[index]);
                });
                // 点击删除
                $('.note-item-del').click(function (e) {
                    var id = parseInt($(this).parent().attr('data-id'));
                    layer.confirm('确认删除吗？', {
                        skin: 'layui-layer-admin',
                        shade: .1,
                        shadeClose: true
                    }, function (index) {
                            layer.close(index);
                            $.post("/api/admin/DeleteNote", {  id: id }, function (res) {
                                res = JSON.parse(res);
                                if (res.code == 1) {
                                    notice.success({
                                        title: '系统提示',
                                        message: res.message
                                    });
                                    //dataList.splice(id, 1);
                                    //for (var i = 0; i < dataList.length; i++) dataList[i].id = i;
                                    //putDataList();
                                    renderList();
                                } else {
                                    notice.error({
                                        title: '系统提示',
                                        message: res.message
                                    });
                                }
                            });
                        //
                        
                    });
                    e.stopPropagation();
                });

            }.bind(this));
            //if (dataList === undefined) dataList = [];
            //for (var i = 0; i < dataList.length; i++) {
            //    var item = dataList[i];
            //    $noteWrapper.prepend([
            //        '<div class="note-item" data-id="', item.id, '">',
            //        '   <div class="note-item-content">', util.escape(item.content), '</div>',
            //        '   <div class="note-item-time">', item.time, '</div>',
            //        '   <i class="layui-icon layui-icon-close-fill note-item-del"></i>',
            //        '</div>'
            //    ].join(''));
            //}
           
            
        }

        renderList();

        /* 添加 */
        $('#noteAddBtn').click(function () {
            showNote();
        });

        // 显示编辑弹窗
        function showNote(data) {
            var id = data ? data.id : undefined, content = data ? data.content : '';
            admin.open({
                id: 'layer-note-edit',
                title: '便签',
                type: 1,
                area: 'auto',
                offset: '50px',
                shadeClose: true,
                content: '<textarea id="noteEditText" placeholder="请输入内容" style="width: 280px;height: 150px;border: none;color: #666666;word-wrap: break-word;padding: 10px 20px;resize: vertical;">' + content + '</textarea>',
                success: function () {
                    $('#noteEditText').change(function () {
                        content = $(this).val();
                    });
                },
                end: function () {
                    if (id !== undefined) {
                        if (!content) {
                            dataList.splice(id, 1);
                            for (var i = 0; i < dataList.length; i++) dataList[i].id = i;
                        } else if (content !== data.content) {
                            $.post("/api/admin/EditNote", { message: content, id: data.id }, function (res) {
                                res = JSON.parse(res);
                                if (res.code == 1) {
                                    notice.success({
                                        title: '系统提示',
                                        message: res.message
                                    });
                                    renderList();
                                } else {
                                    notice.error({
                                        title: '系统提示',
                                        message: res.message
                                    });
                                }
                            });
                        }
                    } else if (content) {
                        $.post("/api/admin/AddNote", { message: content }, function (res) {
                            res = JSON.parse(res);
                            if (res.code == 1) {
                                notice.success({
                                    title: '系统提示',
                                    message: res.message
                                });
                                renderList();
                            } else {
                                notice.error({
                                    title: '系统提示',
                                    message: res.message
                                });
                            }
                        });
                        
                    }
                    //putDataList();
                    
                }
            });
        }

        /* 更新本地缓存 */
        function putDataList() {
            layui.data(admin.setter.tableName, {key: 'notes', value: dataList});
        }

    });</script>

<style>
    .note-wrapper {
        padding: 15px 0 15px 15px;
        background-color: #fbfbfb;
        position: absolute;
        top: 43px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

        .note-wrapper .note-item {
            display: inline-block;
            width: 110px;
            padding: 12px;
            cursor: pointer;
            position: relative;
            border-radius: 8px;
            margin: 0 15px 15px 0;
            border: 1px solid #eeeeee;
            background-color: #ffffff;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-transition: all .3s ease;
            -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
            -o-transition: all .3s ease;
            transition: all .3s ease;
        }

            .note-wrapper .note-item:hover {
                box-shadow: 0 0 8px rgba(0, 0, 0, .05);
                -webkit-transform: scale(1.02);
                -moz-transform: scale(1.02);
                -ms-transform: scale(1.02);
                -o-transform: scale(1.02);
                transform: scale(1.02);
            }

            .note-wrapper .note-item .note-item-content {
                color: #666;
                height: 80px;
                font-size: 14px;
                overflow: hidden;
                word-break: break-all;
            }

            .note-wrapper .note-item .note-item-time {
                color: #999;
                font-size: 12px;
                margin-top: 8px;
            }

            .note-wrapper .note-item .note-item-del {
                position: absolute;
                top: 2px;
                right: 2px;
                color: #FF5722;
                font-size: 24px;
                height: 24px;
                width: 24px;
                background-color: #fff;
                border-radius: 50%;
                visibility: hidden;
                -webkit-transition: all .3s ease;
                -moz-transition: all .3s ease;
                -ms-transition: all .3s ease;
                -o-transition: all .3s ease;
                transition: all .3s ease;
                opacity: 0;
            }

            .note-wrapper .note-item:hover .note-item-del {
                visibility: visible;
                opacity: 1;
            }

    .note-empty {
        color: #999;
        padding: 80px 0;
        text-align: center;
        display: none;
        position: relative;
        z-index: 1
    }

        .note-empty .layui-icon {
            font-size: 60px;
            margin-bottom: 10px;
            display: inline-block;
        }
</style>